<template>
  <main class="switch-list">
    <h3>Switch 开关</h3>
    <p>开关选择器。</p>
    <h4>代码演示</h4>
    <main>
      <section>
        <div class="demo-wrap">
          <Switch></Switch>
        </div>
        <div class="demo-footer">
          <span>基本</span>
          <p>最简单的用法。</p>
        </div>
      </section>
      <section>
        <div class="demo-wrap">
          <Switch :disable="true"></Switch>
        </div>
        <div class="demo-footer">
          <span>禁用</span>
          <p>设置disable属性为true，禁用Switch。</p>
        </div>
      </section>
      <section>
        <div class="demo-wrap">
          <!-- <Switch :color="green"></Switch> -->
        </div>
        <div class="demo-footer">
          <span>颜色(有问题)</span>
          <p></p>
        </div>
      </section>
      <section>
        <div class="list-wrap">
          <Switch :size="large"></Switch>
          <span>大</span>
          <Switch :size='medium'></Switch>
          <span>中</span>
          <Switch :size="small"></Switch>
          <span>小</span>
        </div>
        <div class="demo-footer">
          <span>尺寸</span>
          <p>设置size属性为small medium large。默认为medium</p>
        </div>
      </section>
      <section>
        <div class="demo-wrap">
          <Switch :bgColor="bgColor">
          </Switch>
        </div>
        <div class="demo-footer">
          <span>文字(有问题)</span>
          <p>
            在Switch 中直接写入文本 ：
            开
          </p>
        </div>
      </section>
    </main>
  </main>
</template>

<script lang='ts'>
import Switch from "../lib/Switch.vue";

import { ref } from "vue";
export default {
  name: "Switch",
  components: {
    Switch,
  },
  setup() {
    const bgColor = ref({
      background: "#2d8cf0",
    });
    const large = ref("large");
    const medium = ref("medium");
    const small = ref("small");
    return {
      bgColor,
      large,
      medium,
      small
    };
  },
};
</script>
<style lang="scss" scoped>
.switch-list {
  margin-left: 20px;
  > main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    section {
      margin: 20px;
      .demo-footer {
        > p {
          letter-spacing: 1px;
          padding: 20px;
          font-size: 15px;
          color: rgba(0, 0, 0, 0.85);
        }
        > span {
          position: absolute;
          top: -12px;
          left: 20px;
          // width: 100%;
          padding: 0 10px;
          background-color: #fff;
          display: block;
        }
        border-top: 1px solid #f0f0f0;
        position: relative;
      }
      .demo-wrap {
        margin: 40px 20px;
      }
      > .list-wrap {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 40px 20px;
      }
      width: 100%;
      border: 1px solid #f0f0f0;
      border-radius: 10px;
      box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #f0f0f0;
    }
  }
  h4 {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 24px;
  }
  h3 {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 30px;
  }
}
</style>
